// 盒子宽和高
size($w, $h)
  width $w
  height $h

// 字体大小
fz($fz)
  font-size $fz
lh($h)
  line-height $h

// 字体颜色, 包括链接与非链接
color($color)
  color $color

top-border-1px($color = #ccccc)
  position relative
  &::before
    position absolute
    content ''
    top 0
    left 0
    width 100%
    height 1px
    background $color
    @media only screen and (-webkit-device-pixel-ratio 2)
      transform scaleY(.5)

    @media only screen and (-webkit-device-pixel-ratio 3)
      transform scaleY(.33333333333)

bottom-border-1px($color = #ccccc)
  position relative
  &::before
    position absolute
    content ''
    display block
    bottom 0
    width 100%
    height 1px
    background $color
    @media only screen and (-webkit-device-pixel-ratio 2)
      transform scaleY(.5)

    @media only screen and (-webkit-device-pixel-ratio 3)
      transform scaleY(.33333333333)


left-border-1px($color = #ccccc)
  position relative
  &::before
    position absolute
    content ''
    display block
    left 0
    width 1px
    height 100%
    background $color
    @media only screen and (-webkit-device-pixel-ratio 2)
      transform scaleX(5)

    @media only screen and (-webkit-device-pixel-ratio 3)
      transform scaleX(33333333333)

right-border-1px($color = #ccccc)
  position relative
  &::before
    position absolute
    content ''
    display block
    right 0
    width 1px
    height 100%
    background $color
    @media only screen and (-webkit-device-pixel-ratio 2)
      transform scaleX(.5)

    @media only screen and (-webkit-device-pixel-ratio 3)
      transform scaleX(.33333333333)



bg($argument)
  background $argument
bgi($url)
  background url($url) no-repeat
bgs($w, $h)
  background-size $w $h
bgp($x, $y)
  background-position $x $y

// 统一盒模型
border-box()
  /**, *after, *before  */
  -webkit-box-sizing border-box
  -moz-box-sizing border-box
  box-sizing border-box

// 文字图片居中
center-text()
  text-align center
// 块级元素水平居中
center-auto()
  display block
  margin-left auto
  margin-right auto

// 浮动, 兼容 IE6
//  *display inline displayinline
fl()
  float left
fr()
  float right

// 清除浮动
clearFix()
  *zoom 1
  &::after
    display block
    clear both
    content ''
    visibility hidden
    height 0

flex-auto()
  display flex
  flex-direction column
  align-items center

//---盒子溢出处理
overflow(method=hidden)
  overflow method

absolute()
  position absolute
  top 0
  left 0
  bottom 0
  right 0

